          <div class="row">
            <div class="span9">
              <form id="formulario"
                    class="form-horizontal"
                    action="<?php echo $this->Html->url(array('controller' => 'pessoas')); ?>"
                    method="post"
                    accept-charset="utf-8"
                    enctype="multipart/form-data">
                <fieldset>
                  <legend>
                    Cadastro
                    <?php echo $this->Html->image('ajax-loader.gif', array('id' => 'ajax-loader', 'alt' => __d("contatos", "Carregando..."))); ?>
                  </legend>
                  <div class="control-group required">
                    <label class="control-label" for="PessoaNome">Nome</label>
                    <div class="controls">
                      <input class="span3"
                             id="PessoaNome"
                             type="text"
                             name="data[Pessoa][nome]"
                             tabindex="1"
                             autofocus
                             data-rules="{rules:{required:true,minlength:3,pattern:/^\D{3,}$/i,messages:{required:'Obrigatório',minlength:'O nome deve conter no mínimo 3 caracteres',pattern:'Caracteres inválidos. Somente letras e espaços são permitidos.'}}}"
                             title="Este campo deve conter no mínimo 3 caracteres, sendo permitido somente letras e espaços para separar nomes."
                             required>
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group required">
                    <label class="control-label">Sexo</label>
                    <div class="controls">
                      <label class="radio inline">
                        <input id="PessoaSexoFeminino"
                               type="radio"
                               name="data[Pessoa][sexo]"
                               tabindex="2"
                               value="F"
                               data-rules="{rules:{required:true,messages:{required:'Obrigatório'}}}"
                               required>
                        Feminino
                      </label>
                      <label class="radio inline">
                        <input id="PessoaSexoMasculino"
                               type="radio"
                               name="data[Pessoa][sexo]"
                               tabindex="3"
                               value="M">
                        Masculino
                      </label>
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group required">
                    <label class="control-label" for="PessoaDataNascimento">Data de Nascimento</label>
                    <div class="controls">
                      <input class="span3"
                             id="PessoaDataNascimento"
                             type="date"
                             name="data[Pessoa][data_nascimento]"
                             tabindex="4"
                             data-rules="{rules:{required:true,date:true,messages:{required:'Obrigatório',date:'Data inválida'}}}"
                             required>
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group required">
                    <label class="control-label" for="PessoaEmail">E-mail</label>
                    <div class="controls">
                      <input class="span3"
                             id="PessoaEmail"
                             type="email"
                             name="data[Pessoa][email]"
                             tabindex="5"
                             data-rules="{rules:{required:true,email:true,messages:{required:'Obrigatório',email:'E-mail inválido'}}}"
                             required>
                      <span class="help-inline"></span>
                      <p class="help-block">Não será publicado</p>
                    </div>
                  </div>
                  <div class="control-group required">
                    <label class="control-label" for="PessoaSenha">Senha</label>
                    <div class="controls">
                      <input class="span3"
                             id="PessoaSenha"
                             type="password"
                             name="data[Pessoa][senha]"
                             tabindex="6"
                             data-rules="{rules:{required:true,minlength:6,messages:{required:'Obrigatório',minlength:'A senha deve conter no mínimo 6 caracteres'}}}"
                             required>
                      <span class="help-inline"></span>
                      <p class="help-block">Mínimo de 6 caracteres</p>
                    </div>
                  </div>
                  <div class="control-group required">
                    <label class="control-label" for="PessoaConfirmarSenha">Confirmar Senha</label>
                    <div class="controls">
                      <input class="span3"
                             id="PessoaConfirmarSenha"
                             type="password"
                             name="data[Pessoa][confirmar_senha]"
                             tabindex="7"
                             data-rules="{rules:{required:true,minlength:6,equalTo:'#PessoaSenha',messages:{required:'Obrigatório',minlength:'A senha deve conter no mínimo 6 caracteres',equalTo:'As senhas não conferem'}}}"
                             required>
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group required">
                    <label class="control-label" for="PessoaMunicipio">Município</label>
                    <div class="controls">
                      <input id="PessoaMunicipioId"
                             type="hidden"
                             name="data[Pessoa][municipio_id]">
                      <div class="input-append">
                        <input class="span3"
                               id="PessoaMunicipioDescricao"
                               type="text"
                               name="data[Pessoa][municipio_descricao]"
                               tabindex="8"
                               data-rules="{rules:{required:true,messages:{required:'Obrigatório'}}}"
                               placeholder="Digite o nome do município para consultar..."
                               title="Digite o nome do município para consultar e então o selecione na lista de resultados."
                               required>
                        <button class="btn" id="limparMunicipio" type="button"><i class="icon-ban-circle"></i></button>
                      </div>
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group emphasize-input1">
                    <label class="control-label" for="PessoaTelefoneResidencial">Telefone Residencial</label>
                    <div class="controls">
                      <input class="span3"
                             id="PessoaTelefoneResidencial"
                             type="tel"
                             name="data[Pessoa][telefone_residencial]"
                             tabindex="9"
                             data-rules="{rules:{phoneUS:true,messages:{phoneUS:'Número de telefone inválido'}}}">
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group emphasize-input1">
                    <label class="control-label" for="PessoaTelefoneCelular">Telefone Celular</label>
                    <div class="controls">
                      <input class="span3"
                             id="PessoaTelefoneCelular"
                             type="tel"
                             name="data[Pessoa][telefone_celular]"
                             tabindex="10"
                             data-rules="{rules:{phoneUS:true,messages:{phoneUS:'Número de telefone inválido'}}}">
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group">
                    <label class="control-label" for="PessoaFumante">Fumante?</label>
                    <div class="controls">
                      <input id="PessoaFumante"
                             type="checkbox"
                             name="data[Pessoa][fumante]"
                             tabindex="11"
                             value="t">
                      <span class="help-inline"></span>
                    </div>
                  </div>
                  <div class="control-group">
                    <label class="control-label" for="PessoaFotografia">Fotografia</label>
                    <div class="controls">
                      <input type="hidden" name="MAX_FILE_SIZE" value="307200"><!-- 300 Kbytes -->
                      <input class="input-file"
                             id="PessoaFotografia"
                             type="file"
                             name="data[Pessoa][fotografia]"
                             tabindex="12"
                             data-rules="{rules:{accept:'jpeg|jpg|png',messages:{accept:'Arquivo inválido'}}}">
                      <span class="help-inline"></span>
                      <p class="help-block">Tamanho máximo do arquivo permitido: 300 KB</p>
                      <p class="help-block">Tipos de arquivo permitidos: *.jpeg, *.jpg, *.png</p>
                      <br>
                      <div class="progress progress-striped active hide" style="width: 260px;">
                        <div class="bar" style="width: 45%;">
                        </div>
                      </div>
                    </div>
                  </div>
                  <em class="required">Obrigatório</em>
                  <br>
                  <em class="emphasize-input1">Obrigatório informar pelo menos um telefone</em>
                  <div class="form-actions">
                    <button type="reset" class="btn">Limpar</button>
                    <button type="submit" class="btn btn-primary">Salvar</button>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
          <?php echo $this->Html->script('app/formview'); ?>
          <script type="text/javascript">
            $(document).ready(function() {
              // Classe ExtendFormView {{{
              var ExtendFormView = FormView.extend({
                events: {
                  "click #limparMunicipio": "limparMunicipio",
                },
                initialize: function() {
                  FormView.prototype.initialize.call(this); // chama o método da super classe.
                  _.bindAll(this, "limparMunicipio");
                  //
                  $("#PessoaMunicipioDescricao").autocomplete({
                    source: "municipios/obterDadosParaAutoCompletar/" + $("#PessoaMunicipioDescricao").val(),
                    minLength: 3,
                    delay: 800,
                    select: function(event, ui) {
                      $(this).val(ui.item.label);
                      $("#PessoaMunicipioId").val(ui.item.id);
                      $(this).attr("readonly", "readonly").autocomplete("disable");
                      return false;
                    }
                  });
                  //
                  $(":checkbox").iphoneStyle({
                    checkedLabel: "Sim",
                    uncheckedLabel: "Não"
                  });
                },
                limparFormulario: function(e) {
                  FormView.prototype.limparFormulario.call(this);  // chama o método da super classe.
                  $("#PessoaMunicipioDescricao").autocomplete("enable").removeAttr("readonly");
                },
                limparMunicipio: function(e) {
                  $("#PessoaMunicipioId").val("");
                  $("#PessoaMunicipioDescricao").autocomplete("enable").removeAttr("readonly").val("").focus();
                }
              });
              //}}}
              var extendFormView = new ExtendFormView({
                el: $("#formulario")
              });
            });
            // Backbone.Model       =>  Pessoa
            // Backbone.Collection  =>  PessoaCollection
            // Backbone.View        =>  FormView
          </script>